<template>
    <div class="review-modal">
        <el-button
            type="green"
            @click="addAction"
            v-if="hasPermission('03001001')"
            :disabled="!$store.getters.hasEditPermission"
            >添加</el-button
        >
        <el-table :data="dataList" class="mt-10" style="width: 100%" v-loading="loading">
            <el-table-column
                type="index"
                label="序号"
                width="60"
                :index="indexMethod"
            ></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="userName" label="创建人"></el-table-column>
            <el-table-column prop="time" label="创建时间"></el-table-column>
            <el-table-column label="操作" :width="200">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button
                            type="danger"
                            @click="deleteAction(scope.row)"
                            v-if="hasPermission('03001002')"
                            :disabled="!$store.getters.hasEditPermission"
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total > 0"
            class="text-right mt-20 mr-20"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, total, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 添加/编辑 start -->
        <el-dialog
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            width="600px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <el-form ref="newForm" :model="newForm" label-width="120px">
                <el-form-item
                    label="评论内容："
                    prop="content"
                    :rules="[{ required: true, message: '请输入评论内容', trigger: 'change' }]"
                >
                    <el-input
                        placeholder="请输入"
                        type="textarea"
                        v-model.trim="newForm.content"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button type="primary" :loading="adding" @click="submitAction">确定</el-button>
            </div>
        </el-dialog>
        <!-- 添加/编辑 end -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
            dataList: [],
            activeCate: { id: "" },
            newModalTitle: "新增评论",
            newModalVisible: false,
            newForm: {},
            adding: false,
            deleting: false,
        }
    },
    props: {
        activeData: {
            type: Object,
            default() {
                return {}
            },
            required: true,
        },
    },
    created() {
        this.getData(1)
    },
    methods: {
        getData(page) {
            this.loading = true
            let params = {
                page: page,
                limit: this.pageSize,
                knowledgeId: this.activeData.id,
            }
            this.$get("/noticeAnnouncement/noticeAnnouncement/getCommentListPage", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        addAction() {
            this.newForm = {}
            this.newModalVisible = true
        },
        submitAction() {
            this.$refs["newForm"].validate((valid) => {
                if (valid) {
                    this.adding = true
                    let params = Object.assign(
                        {
                            knowledgeId: this.activeData.id,
                            userName: this.$store.state.siteInfos.userRealName,
                        },
                        this.newForm
                    )
                    this.$ajax({
                        url: "/noticeAnnouncement/noticeAnnouncement/addComment",
                        method: "post",
                        data: params,
                    }).then(
                        (data) => {
                            this.adding = false
                            this.$message.success("保存成功")
                            this.newModalVisible = false
                            this.getData(this.currentPage)
                        },
                        (error) => {
                            this.adding = false
                            this.$message.error(error.msg)
                        }
                    )
                } else {
                    return false
                }
            })
        },

        deleteAction(item) {
            this.showConfirm("确定删除该评论吗？", () => {
                this.deleting = true
                this.$post("/noticeAnnouncement/noticeAnnouncement/delComment", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
}
</script>
